<!--创作中心长视频-->
<template>
  <div class="ele-body" style="padding-bottom: 71px">
    <!--   :rules="rules"   -->
    <el-form
      :hide-required-asterisk="true"
      ref="form"
      :model="form"
      label-width="80px"
      @keyup.enter.native="submit"
      @submit.native.prevent
    >
      <el-card
        shadow="never"
        body-style="padding: 22px 22px 0 22px;"
      >
        <el-row :gutter="15">
          <el-col style="height: 60px" :xs="12" :sm="8" :lg="8" :xl="8">
            <el-form-item label="剪辑名称:" class="width80">
              <el-input
                v-model="form.clipName"
                placeholder="请输入剪辑名称"
                clearable
              />
            </el-form-item>
          </el-col>
          <!--<el-col style="height: 60px" :xs="12" :sm="8" :lg="8" :xl="8">
            <el-form-item label="解说类型 :" class="width80">
              <el-select
                v-model="form.explanationSettings"
                placeholder="请选择解说类型 "
                class="ele-fluid"
                clearable
                @clear="see()"
              >
                &lt;!&ndash;解说设置 1.自己上传 2.ai配音&ndash;&gt;
                <el-option label="AI配音" :value="2" />
                <el-option label="自己上传" :value="1" />
              </el-select>
            </el-form-item>
          </el-col>-->
          <el-col style="height: 60px" :xs="12" :sm="8" :lg="8" :xl="8">
            <el-form-item label="剪辑状态:" prop="status" class="width80">
              <el-select
                v-model="form.status"
                placeholder="请选择剪辑状态"
                class="ele-block"
                clearable
                @clear="see()"
              >
                <!--    status: 状态 1.未执行2.执行中' ——没有剪辑完成状态，剪辑中，即可生成视频 -->
                <el-option label="未剪辑" :value="1" />
                <el-option label="剪辑中" :value="2" />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col style="height: 60px" :xs="12" :sm="8" :lg="8" :xl="8">
            <el-form-item label="创建时间:" prop="datetime" class="width80">
              <el-date-picker
                v-model="form.datetime"
                type="daterange"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                class="ele-fluid"
                @change="select"
              />
            </el-form-item>
          </el-col>

        </el-row>
        <el-row style="margin-bottom: 10px">
          <el-col  :xs="12" :sm="12" :lg="12" :xl="12">
            <el-button
              icon="el-icon-zoom-out"
              size="small"
              type="primary"
              class="colorBlue"
              @click="see()"
            >
              查询
            </el-button>
            <el-button
              icon="el-icon-refresh-right"
              size="small"
              class="resetting-btn"
              @click="resetting()"
            >
              重置
            </el-button>
          </el-col>
          <el-col  :xs="12" :sm="12" :lg="12" :xl="12" align="right">
              <!--<el-image></el-image>-->
            <el-button type="primary" class="colorBlue" @click="newList()">新建剪辑</el-button>
          </el-col>
        </el-row>
      </el-card>
      <el-card
        shadow="never"
        body-style="padding: 22px;"
      >
      <table-list ref="table" @edit="newList" />
      </el-card>
    </el-form>

    <new-long-video
      :mcList="mcList"
      :musics="musics"
      ref="new"
      :visible.sync="newListShow" @load="see"> </new-long-video>
  </div>
</template>

<script>
  import tableList from './components/table-list.vue';
  import { projectPage, scaleList} from "@/api/creatCenter/longVideo";
  import {listUserFiles, publicFile} from "@/api/creatCenter/material";
  import NewLongVideo from "@/views/creatCenter/longVideo/components/newLongVideo";
  import {musicCollect, musicList} from "@/api/lncomingManagement/music";
  import {mc} from "@/utils/js/mc_list";
  export default {
    name: "authoringClips",
    components: {NewLongVideo, tableList},
    data() {
      const defaultForm = {}
      return {
        defaultForm,
        mcList:[], //热榜音乐
        musics:[],  //热榜音乐
        //获取用户名
        username:this.$store.state.user.info.username,
        // 新建剪辑弹窗是否打开
        newListShow:false,
        // 表单数据
        form: {...defaultForm},

      }},
    computed: {
      // 是否开启响应式布局
      styleResponsive() {
        return this.$store.state.theme.styleResponsive;
      }
    },
    activated(){
      console.log("路由刷新5555555555555555555555555555555555555555555")
      this.init()  // 热榜音乐加载
      this.see()
    },
    created() {
      console.log("进入查询created211111111111111111=============",this.$route.query)
    },
    methods: {

      // 热榜音乐数据
      async init () {
        let res = await musicCollect(this.username)
        console.log("分类res=======",res)
        res['mc_list']
          ? mc.find((item) => {
            let mcItem
            (mcItem = res['mc_list'].find((m) => {
              return item === m.name
            })) ? this.mcList.push(mcItem) : void 0
          }) : console.log('加载分类失败11')
        let music
        this.mcList.length > 0
          ? music = await musicList(this.mcList[0]['id_str'],this.username) : console.log('分类音乐加载失败22')
        music && music['music_list']
          ? this.musics = music['music_list'] : console.log('分类音乐加载失败33')
        console.log("加载分类mcList,this.musics ",this.mcList,this.musics )
      },

      // 分页查询剪辑工程列表
      see(){
        console.log("进入查询=============")
        if(this.form.datetime){
          Object.assign(this.form, {
            startTime:  this.form.datetime?this.form.datetime[0] + ' 00:00:00':'',
            endTime:  this.form.datetime?this.form.datetime[1] + ' 23:59:59':''
          })
        }
        this.$nextTick(()=>{
          this.$refs['table'].reload(this.form)
        })
      },
      //重置
      resetting(){
        // 需修改
        // 前提是表单项中要使用prop属性，绑定input中的v-model所绑定的字段，才可以被清空
        this.$refs.form.resetFields()
        this.form.datetime=''
        delete this.form.datetime
        delete this.form.endTime
        delete this.form.startTime
        delete this.form.clipName
        this.form={...this.defaultForm}
        for(let prop in this.form){
          delete this.form[prop]
        }
        this.$nextTick(()=>{
          this.$refs['table'].reload()
        })
      },

      select(e){
        console.log("日期选择e============",e,'form.datetime',this.form.datetime)
      },
      newList(id){
        console.log("newList==========id",id)
        this.newListShow = true;
        this.$nextTick(()=>{
          this.$refs['new'].show(id)
        })
      },
    }
  }
</script>

<style scoped>
  /*  .el-input__inner{
      border: none;
    }*/
  .montage-btn{
    color: #fff;
    width: 94px;
    height: 33px;
    background: #1E6CEB;
    border-radius: 2px;
  }
  .inquire-about,.resetting-btn{
    width: 80px;
    height: 33px;
    border-radius: 2px;
  }
  .inquire-about{
    margin-right: 20px;
    background: #1E6CEB;
  }
  .resetting-btn{
    background: #F5F5F5;
  }

</style>
